<template>
    <!-- 页面标题 -->
    <div class="page-header">
        <h1>产品溯源详情</h1>
        <p class="subtitle">查看和管理产品的完整溯源信息</p>
    </div>

    <!-- 产品信息卡片 -->
    <el-card class="card product-card shadow-sm" style="max-width: 1200px;">
        <template #header>
            <div class="card-header">
                <el-icon class="header-icon">
                    <Goods />
                </el-icon>
                <span class="header-title">产品基本信息</span>
                <el-button type="success" class="header-button" @click="addimgs">保存图片</el-button>
            </div>
        </template>
        <div class="info-layout">
            <div class="product-image-section">
                <el-upload class="avatar-uploader rounded" :show-file-list="false">
                    <img v-if="Getshow.shopImg" :src="Getshow.shopImg" class="avatar img-hover-zoom" />
                    <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>
            </div>

            <div class="product-info-section">
                <h2 class="product-name">{{ Getshow.shopName }}</h2>
                <div class="info-grid">
                    <div class="info-item">
                        <span class="info-label">生产批次</span>
                        <span class="info-value">{{ Getshow.shopBatch }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">生产许可证号</span>
                        <span class="info-value">{{ Getshow.shoppermit }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">保质期</span>
                        <span class="info-value">{{ Getshow.shopBestDate }}天</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">生产企业</span>
                        <span class="info-value">{{ Getshow.shopFirm }}</span>
                    </div>
                </div>
            </div>

            <div class="certificate-section">
                <h3 class="section-title">产品检验报告</h3>
                <el-upload v-model:file-list="con" action="http://localhost:5002/api/Imgs/Imgs" list-type="picture-card"
                    :on-preview="handlePictureCardPreview" :on-remove="handleRemove" class="certificate-upload">
                    <el-icon>
                        <Plus />
                    </el-icon>
                </el-upload>
                <el-dialog v-model="dialogVisible">
                    <img w-full :src="dialogImageUrl" alt="Preview Image" />
                </el-dialog>
            </div>
        </div>
    </el-card>
    <!-- 溯源信息卡片 -->
    <el-card class="card trace-card shadow-sm" style="max-width: 1200px;margin-top: 20px;">
        <template #header>
            <div class="card-header">
                <el-icon class="header-icon">
                    <Location />
                </el-icon>
                <span class="header-title">溯源全流程信息</span>
            </div>
        </template>
        <el-tabs v-model="activeName" class="demo-tabs trace-tabs" @tab-click="handleClick">
            <el-tab-pane label="养殖信息" name="second">
                <div class="tab-content">
                    <div class="info-section">
                        <h3 class="section-title">
                            <el-icon class="section-icon">
                                <Crop />
                            </el-icon>
                            养殖信息
                            <el-button type="primary" size="small" class="info-setting-btn"
                                @click="farmopen">设置</el-button>
                        </h3>
                        <div class="info-grid large-grid">
                            <div class="info-item">
                                <span class="info-label">品种</span>
                                <span class="info-value">{{ DateFarm.farmingName }}</span>
                            </div>
                            <div class="info-item">
                                <span class="info-label">饲养天数</span>
                                <span class="info-value">{{ DateFarm.farmingDay }}天</span>
                            </div>
                            <div class="info-item">
                                <span class="info-label">饲养负责人</span>
                                <span class="info-value">{{ DateFarm.farmingNickName }}</span>
                            </div>
                            <div class="info-item">
                                <span class="info-label">来源</span>
                                <span class="info-value">{{ DateFarm.farmingFrom }}</span>
                            </div>
                            <div class="info-item">
                                <span class="info-label">饲养品牌</span>
                                <span class="info-value">{{ DateFarm.farmingBrand }}</span>
                            </div>
                            <div class="info-item">
                                <span class="info-label">出栏日期</span>
                                <span class="info-value">{{ moment(DateFarm.farmingTime).format('YYYY年MM月DD日') }}</span>
                            </div>
                        </div>
                    </div>
                    <!-- 保健信息 -->
                    <div class="info-section mt-4">
                        <h3 class="section-title">
                            <el-icon class="section-icon">
                                <MedicineBox />
                            </el-icon>
                            保健信息
                            <el-button type="primary" size="small" class="info-setting-btn"
                                @click="addrowhealth">新增行</el-button>
                        </h3>
                        <el-table :data="conse" style="width: 100%" border stripe class="trace-table">
                            <el-table-column prop="healthDay" label="饲养天数" width="150">
                                <template #default="scope">
                                    <el-input v-model="healthda.healthDay" v-if="scope.row.healthId == null"
                                        placeholder="请输入饲养天数" />
                                    <span v-else>{{ scope.row.healthDay }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="healthTypeName" label="保健方式" width="180">
                                <template #default="scope">
                                    <el-input v-model="healthda.healthTypeName" v-if="scope.row.healthId == null"
                                        placeholder="请输入保健方式" />
                                    <span v-else>{{ scope.row.healthTypeName }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="healthName" label="保健方法" width="auto">
                                <template #default="scope">
                                    <el-input v-model="healthda.healthName" v-if="scope.row.healthId == null"
                                        placeholder="请输入保健方法" />
                                    <span v-else>{{ scope.row.healthName }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column fixed="right" label="操作" min-width="150">
                                <template #default="scope">
                                    <el-button link type="primary" size="small" @click="savehealth"
                                        v-show="scope.row.healthId == null" class="table-btn">保存</el-button>
                                    <el-button link type="primary" size="small" @click="updatehealth(scope.row)"
                                        v-show="scope.row.healthId" class="table-btn">修改</el-button>
                                    <el-button link type="danger" size="small" @click="delrowhealth(scope.$index)"
                                        v-if="scope.row.healthId == null" class="table-btn">删除</el-button>
                                    <el-button link type="danger" size="small" @click="deletehealth(scope.row.healthId)"
                                        v-if="scope.row.healthId" class="table-btn">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>

                <!-- 动检证 -->
                <div class="info-section mt-4">
                    <h3 class="section-title">
                        <el-icon class="section-icon">
                            <Document />
                        </el-icon>
                        动检证
                        <el-button type="primary" size="small" class="info-setting-btn" @click="">添加</el-button>
                    </h3>
                    <el-upload v-model:file-list="fileList"
                        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" list-type="picture-card"
                        :on-preview="handlePictureCardPreview" :on-remove="handleRemove" class="certificate-upload">
                        <div class="upload-content">
                            <el-icon class="upload-icon">
                                <UploadFilled />
                            </el-icon>
                            <div class="upload-text">
                                <span>点击或拖拽文件到此处上传</span>
                                <div class="el-upload__tip mt-2">
                                    只能上传jpg/png文件，且不超过2MB
                                </div>
                            </div>
                        </div>
                    </el-upload>
                    <el-dialog v-model="dialogVisible">
                        <img w-full :src="dialogImageUrl" alt="Preview Image" />
                    </el-dialog>
                </div>
                <el-container style="height: 150px;margin-top: 25px;margin-left: 10px;">
                    <el-aside width="200px">
                        <span style="color: dodgerblue;">企业信息</span>
                        <el-button style="margin-left: 35px;width: 70px;" size="small"
                            @click="farmcompanopen">设置</el-button>
                        <br /><br />
                        <span style="font-size: 20px;">养殖场:{{ DateFarmCompany.companyName }}</span>
                        <br /><br />
                        <span style="font-size: 20px;">存栏数量:{{ DateFarmCompany.companyCount }}天</span>
                    </el-aside>
                    <el-main style="margin-top: 25px;">
                        <span style="font-size: 20px;margin-left: 200px;">负责人:{{ DateFarmCompany.companyUserName
                        }}</span>
                    </el-main>
                </el-container>
                <div style="margin-left: 10px">
                    <span style="color: dodgerblue;">企业照片</span>
                    <br /><br />
                    <el-upload v-model:file-list="fileList"
                        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" list-type="picture-card"
                        :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                        <el-icon>
                            <Plus />
                        </el-icon>
                    </el-upload>
                    <el-dialog v-model="dialogVisible">
                        <img w-full :src="dialogImageUrl" alt="Preview Image" />
                    </el-dialog>
                </div>
            </el-tab-pane>
            <el-tab-pane label="屠宰信息" name="third">
                <!-- 屠宰详情 -->
                <div class="info-section mt-4">
                    <h3 class="section-title">
                        <el-icon class="section-icon">
                            <KnifeFork />
                        </el-icon>
                        屠宰详情
                        <el-button type="primary" size="small" class="info-setting-btn"
                            @click="AddSlaugopen">设置</el-button>
                    </h3>
                    <div class="info-grid large-grid">
                        <div class="info-item">
                            <span class="info-label">批次</span>
                            <span class="info-value">{{ DateSlaug.slaughterCode }}</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">到厂均重</span>
                            <span class="info-value">{{ DateSlaug.slaughterMess }}公斤</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">到厂时间</span>
                            <span class="info-value">{{ moment(DateSlaug.slaughterEndTime).format('YYYY年MM月DD日')
                            }}</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">屠宰时间</span>
                            <span class="info-value">{{ moment(DateSlaug.slaughterBetTime).format('YYYY年MM月DD日')
                            }}</span>
                        </div>
                    </div>
                </div>

                <!-- 相关资质 -->
                <div class="info-section mt-4">
                    <h3 class="section-title">
                        <el-icon class="section-icon">
                            <Stamp />
                        </el-icon>
                        相关资质
                    </h3>
                    <el-upload v-model:file-list="fileList"
                        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" list-type="picture-card"
                        :on-preview="handlePictureCardPreview" :on-remove="handleRemove" class="certificate-upload">
                        <div class="upload-content">
                            <el-icon class="upload-icon">
                                <UploadFilled />
                            </el-icon>
                            <div class="upload-text">
                                <span>点击或拖拽文件到此处上传</span>
                                <div class="el-upload__tip mt-2">
                                    只能上传jpg/png文件，且不超过2MB
                                </div>
                            </div>
                        </div>
                    </el-upload>
                    <el-dialog v-model="dialogVisible">
                        <img w-full :src="dialogImageUrl" alt="Preview Image" />
                    </el-dialog>
                </div>
                <!-- 企业信息 -->
                <el-container style="height: 280px;margin-left: 10px;margin-top: 20px;">
                    <el-aside width="750px">
                        <span style="color: dodgerblue;">企业信息</span>
                        <el-button style="margin-left: 35px;width: 70px;" size="small"
                            @click="farmslaugda">设置</el-button>
                        <br /><br />
                        <span style="font-size: 20px;">公司名称:{{ DateSlaugs.slaughterName }}</span>
                        <br /><br />
                        <span style="font-size: 20px;">公司地址:{{ DateSlaugs.provincName + DateSlaugs.cityName +
                            DateSlaugs.countyName }}</span>
                        <br /><br />
                        <span style="font-size: 20px;">成立时间:{{ moment(DateSlaugs.slaughterTime).format('YYYY年MM月DD日')
                        }}</span>
                        <br /><br />
                        <span style="font-size: 20px;">公司简介:{{ DateSlaugs.slaughterHome }}</span>
                    </el-aside>
                </el-container>
                <div style="margin-left: 10px">
                    <span style="color: dodgerblue;">企业照片</span>
                    <br /><br />
                    <el-upload v-model:file-list="fileList"
                        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" list-type="picture-card"
                        :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                        <el-icon>
                            <Plus />
                        </el-icon>
                    </el-upload>
                    <el-dialog v-model="dialogVisible">
                        <img w-full :src="dialogImageUrl" alt="Preview Image" />
                    </el-dialog>
                </div>
            </el-tab-pane>
            <el-tab-pane label="深加工信息" name="first">
                <el-container style="height: 140px;margin-left: 10px;">
                    <el-aside width="500px">
                        <span style="color: dodgerblue;">深加工信息</span>
                        <el-button style="margin-left: 35px;width: 70px;" size="small" @click="farmdeep">设置</el-button>
                        <br /><br />
                        <span style="font-size: 20px;">班组:{{ Datedeep.deepName }}</span>
                    </el-aside>
                    <el-aside width="500px" style="margin-top: 38px;">
                        <span style="font-size: 20px;margin-left: 10px;">负责人:{{ Datedeep.deepUserName }}</span>
                    </el-aside>
                </el-container>
                <div style="margin-left: 10px;">
                    <span style="color: dodgerblue;">食品安全信息</span>
                    <br /><br />
                    <el-upload v-model:file-list="fileList"
                        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" list-type="picture-card"
                        :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                        <el-icon>
                            <Plus />
                        </el-icon>
                    </el-upload>
                    <el-dialog v-model="dialogVisible">
                        <img w-full :src="dialogImageUrl" alt="Preview Image" />
                    </el-dialog>
                </div>
                <el-container style="height: 140px;margin-left: 10px;margin-top: 20px;">
                    <el-aside width="500px">
                        <span style="color: dodgerblue;">供应商信息</span>
                        <br /><br />
                        <span style="background-color: blue;">||</span>
                        <span style="color: black;margin-left: 15px;"><b>原料</b></span>
                        <el-button style="width: 70px;margin-left: 15px;" size="small" @click="farmdeep">设置</el-button>
                        <br /><br />
                        <span style="font-size: 20px;margin-left: 25px;">生产批次:{{ Datedeep.deepName }}</span>
                    </el-aside>
                </el-container>
                <div style="margin-left: 37px;">
                    <span style="color: black;"> <b>相关材料</b></span>
                    <br /><br />
                    <el-upload v-model:file-list="fileList"
                        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" list-type="picture-card"
                        :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                        <el-icon>
                            <Plus />
                        </el-icon>
                    </el-upload>
                    <el-dialog v-model="dialogVisible">
                        <img w-full :src="dialogImageUrl" alt="Preview Image" />
                    </el-dialog>
                </div>
                <el-container style="height: 100px;margin-left: 10px;margin-top: 20px;">
                    <el-aside width="500px">
                        <span style="background-color: blue;">||</span>
                        <span style="color: black;margin-left: 15px;"><b>辅料</b></span>
                        <el-button style="width: 70px;margin-left: 15px;" size="small" @click="farmdeep">设置</el-button>
                        <br /><br />
                        <span style="font-size: 20px;margin-left: 25px;">生产批次:{{ Datedeep.deepName }}</span>
                    </el-aside>
                </el-container>
                <div style="margin-left: 37px;">
                    <span style="color: black;"> <b>相关材料</b></span>

                    <br /><br />
                    <el-upload v-model:file-list="fileList"
                        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" list-type="picture-card"
                        :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                        <el-icon>
                            <Plus />
                        </el-icon>
                    </el-upload>
                    <el-dialog v-model="dialogVisible">
                        <img w-full :src="dialogImageUrl" alt="Preview Image" />
                    </el-dialog>
                </div>
                <el-container style="height: 100px;margin-left: 10px;margin-top: 20px;">
                    <el-aside width="500px">
                        <span style="background-color: blue;">||</span>
                        <span style="color: black;margin-left: 15px;"><b>添加剂</b></span>
                        <el-button style="width: 70px;margin-left: 15px;" size="small" @click="farmdeep">设置</el-button>
                        <br /><br />
                        <span style="font-size: 20px;margin-left: 25px;">生产批次:{{ Datedeep.deepName }}</span>
                    </el-aside>
                </el-container>
                <div style="margin-left: 37px;">
                    <span style="color: black;"> <b>相关材料</b></span>
                    <br /><br />
                    <el-upload v-model:file-list="fileList"
                        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" list-type="picture-card"
                        :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                        <el-icon>
                            <Plus />
                        </el-icon>
                    </el-upload>
                    <el-dialog v-model="dialogVisible">
                        <img w-full :src="dialogImageUrl" alt="Preview Image" />
                    </el-dialog>
                </div>
                <el-container style="height: 100px;margin-left: 10px;margin-top: 20px;">
                    <el-aside width="500px">
                        <span style="background-color: blue;">||</span>
                        <span style="color: black;margin-left: 15px;"><b>包材</b></span>
                        <el-button style="width: 70px;margin-left: 15px;" size="small" @click="farmdeep">设置</el-button>
                        <br /><br />
                        <span style="font-size: 20px;margin-left: 25px;">生产批次:{{ Datedeep.deepName }}</span>
                    </el-aside>
                </el-container>
                <div style="margin-left: 37px;">
                    <span style="color: black;"> <b>相关材料</b></span>
                    <br /><br />
                    <el-upload v-model:file-list="fileList"
                        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" list-type="picture-card"
                        :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                        <el-icon>
                            <Plus />
                        </el-icon>
                    </el-upload>
                    <el-dialog v-model="dialogVisible">
                        <img w-full :src="dialogImageUrl" alt="Preview Image" />
                    </el-dialog>
                </div>
                <el-container style="height: 120px;margin-left: 10px;margin-top: 15px;">
                    <el-aside width="500px">
                        <span style="color: dodgerblue;">企业信息</span>
                        <el-button style="margin-left: 35px;width: 70px;" size="small"
                            @click="AddSlaugopen">设置</el-button>
                        <br /><br />
                        <span style="font-size: 20px;">公司名称:{{ DateSlaug.slaughterCode }}</span>
                    </el-aside>
                    <el-aside width="500px" style="margin-top: 38px;">
                        <span style="font-size: 20px;margin-left: 10px;">生产许可证号:{{ DateSlaug.slaughterMess }}</span>
                    </el-aside>
                </el-container>
                <div style="margin-left: 10px;">
                    <span style="color: dodgerblue;">企业照片</span>
                    <br /><br />
                    <el-upload v-model:file-list="fileList"
                        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" list-type="picture-card"
                        :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                        <el-icon>
                            <Plus />
                        </el-icon>
                    </el-upload>
                    <el-dialog v-model="dialogVisible">
                        <img w-full :src="dialogImageUrl" alt="Preview Image" />
                    </el-dialog>
                </div>
            </el-tab-pane>
        </el-tabs>
    </el-card>
    <!-- 添加养殖信息 -->
    <el-dialog v-model="farminopen.isopens" title="养殖信息" width="500">
        <el-form :model="formfarm" label-width="120">
            <el-form-item label="品种">
                <el-input v-model="formfarm.farmingName" />
            </el-form-item>
            <el-form-item label="来源">
                <el-input v-model="formfarm.farmingFrom" />
            </el-form-item>
            <el-form-item label="饲养天数">
                <el-input-number v-model="formfarm.farmingDay" />
            </el-form-item>
            <el-form-item label="饲养品牌">
                <el-input v-model="formfarm.farmingBrand" />
            </el-form-item>
            <el-form-item label="饲养负责人">
                <el-input v-model="formfarm.farmingNickName" />
            </el-form-item>
            <el-form-item label="出栏日期">
                <el-date-picker v-model="formfarm.farmingTime" type="date" placeholder="请选择出栏日期" style="width: 100%" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="farminopen.isopens = false">取消</el-button>
                <el-button type="primary" @click="Addfarm">保存</el-button>
            </div>
        </template>
    </el-dialog>
    <!-- 添加养殖企业信息 -->
    <el-dialog v-model="farmcompaninopen.panopens" title="企业信息" width="500">
        <el-form :model="formfarm" label-width="120">
            <el-form-item label="养殖场">
                <el-input v-model="fpanyfarm.companyName" />
            </el-form-item>
            <el-form-item label="负责人">
                <el-input v-model="fpanyfarm.companyUserName" />
            </el-form-item>
            <el-form-item label="存栏数量">
                <el-input-number v-model="fpanyfarm.companyCount" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="farmcompaninopen.panopens = false">取消</el-button>
                <el-button type="primary" @click="AddCompany">
                    保存
                </el-button>
            </div>
        </template>
    </el-dialog>
    <!-- 添加屠宰信息 -->
    <el-dialog v-model="Slaugopen.irsopen" title="屠宰信息" width="500">
        <el-form :model="formfarm" label-width="120">
            <el-form-item label="批次">
                <el-input v-model="SlaugModel.slaughterCode" />
            </el-form-item>
            <el-form-item label="到厂均重">
                <el-input v-model="SlaugModel.slaughterMess" />
            </el-form-item>
            <el-form-item label="到厂时间">
                <el-date-picker v-model="SlaugModel.slaughterEndTime" type="date" placeholder="请选择到厂日期"
                    style="width: 100%" />
            </el-form-item>
            <el-form-item label="屠宰时间">
                <el-date-picker v-model="SlaugModel.slaughterBetTime" type="date" placeholder="请选择屠宰日期"
                    style="width: 100%" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="Slaugopen.irsopen = false">取消</el-button>
                <el-button type="primary" @click="addSlaug">保存</el-button>
            </div>
        </template>
    </el-dialog>
    <!-- 添加屠宰企业信息 -->
    <el-dialog v-model="Slaugiopens.slaufsop" title="企业信息" width="500">
        <el-form :model="Slaugdast" label-width="120">
            <el-form-item label="公司名称">
                <el-input v-model="Slaugdast.slaughterName" />
            </el-form-item>
            <el-form-item label="公司地址">
                <el-select @change="GetCity" v-model="Slaugdast.provincId" placeholder="省份" clearable
                    style="width: 110px;">
                    <el-option v-for="item in ProvinceData" :label="item.provincName" :value="item.provincId" />
                </el-select>
                <el-select @change="GetCouty" v-model="Slaugdast.cityId" placeholder="市" clearable
                    style="width: 110px;">
                    <el-option v-for="item in CityData" :label="item.cityName" :value="item.cityId" />
                </el-select>
                <el-select v-model="Slaugdast.countyId" placeholder="县" clearable style="width: 110px;">
                    <el-option v-for="item in ContyData" :label="item.countyName" :value="item.countyId" />
                </el-select>
            </el-form-item>
            <el-form-item label="成立时间">
                <el-date-picker v-model="Slaugdast.slaughterTime" type="date" placeholder="请选择到厂日期"
                    style="width: 100%" />
            </el-form-item>
            <el-form-item label="公司简介">
                <el-input type="textarea" v-model="Slaugdast.slaughterHome" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="Slaugiopens.slaufsop = false">取消</el-button>
                <el-button type="primary" @click="AddSlaugs">保存</el-button>
            </div>
        </template>
    </el-dialog>
    <!-- 添加深加工信息 -->
    <el-dialog v-model="Deeodialog.deepisop" title="企业信息" width="500">
        <el-form :model="deepdat" label-width="120">
            <el-form-item label="班组">
                <el-input v-model="deepdat.deepName" />
            </el-form-item>
            <el-form-item label="负责人">
                <el-input v-model="deepdat.deepUserName" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="Deeodialog.deepisop = false">取消</el-button>
                <el-button type="primary" @click="Adddeep">保存</el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import httpaxios from '@/Httpaxios/Httpaxios'
import { useRouter, useRoute } from 'vue-router'
import { Plus } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox, type TabsPaneContext } from 'element-plus'
import axios from 'axios'
import moment from 'moment'
const activeName = ref('first')
const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
}
const router = useRouter()
const route = useRoute()
const imageUrl = ref('')
onMounted(() => {
    Getdetail()
    ShowFarm()
    ShowFarmCompany()
    getimgs()
    showhealth()
    ShowSlaug()
    GetProvince()
    ShowSlaugs()
    Showdeep()
})
// --------------------------------------------------顶部---------------------------------------------
const Getshow = reactive({
    "shopId": 630,
    "shopName": null,
    "shopBatch": "",
    "shopBestDate": null,
    "shoppermit": "",
    "shopFirm": "",
    "shopPletene": "",
    "shopImg": ""
})
const Getdetail = () => {
    httpaxios({
        url: 'http://localhost:5002/api/Source/DetailSource',
        method: 'get',
        params: {
            id: route.query.id
        }
    })
        .then((res) => {
            Getshow.shopImg = res.data.data.shopImg
            Getshow.shopName = res.data.data.shopName
            Getshow.shopBatch = res.data.data.shopBatch
            Getshow.shopBestDate = res.data.data.shopBestDate
            Getshow.shoppermit = res.data.data.shoppermit
            Getshow.shopFirm = res.data.data.shopFirm
            Getshow.shopPletene = res.data.data.shopPletene
        })
}
// --------------------------------------------------中部---------------------------------------------
// ---------------------------添加屠宰信息-----------------------------
const Slaugopen = reactive({
    irsopen: false
})
const AddSlaugopen = () => {
    Slaugopen.irsopen = true
}
const SlaugModel = reactive({
    "slaughterCode": "",
    "slaughterMess": "",
    "slaughterEndTime": "",
    "slaughterBetTime": "",
})
const addSlaug = () => {
    httpaxios({
        url: 'http://localhost:5002/api/Slaughter/AddFarming',
        method: 'post',
        data: SlaugModel
    })
        .then(res => {
            if (res.data.code == 200) {
                ElMessage.success(res.data.message)
                Slaugopen.irsopen = false
            }
            else {
                ElMessage.error(res.data.message)
            }
        })
}
// ---------------------------显示屠宰信息-----------------------------
const DateSlaug = reactive({
    "slaughterCode": "",
    "slaughterMess": "",
    "slaughterEndTime": "",
    "slaughterBetTime": "",
})
const ShowSlaug = () => {
    httpaxios({
        url: 'http://localhost:5002/api/Slaughter/ShowSlaughter',
        method: 'get',
    })
        .then(res => {
            DateSlaug.slaughterCode = res.data.data.slaughterCode
            DateSlaug.slaughterMess = res.data.data.slaughterMess
            DateSlaug.slaughterEndTime = res.data.data.slaughterEndTime
            DateSlaug.slaughterBetTime = res.data.data.slaughterBetTime
        })
}
// ---------------------------添加养殖信息-----------------------------
const farminopen = reactive({
    isopens: false
})
const formfarm = reactive({
    "farmingName": "",
    "farmingFrom": "",
    "farmingDay": null,
    "farmingBrand": "",
    "farmingNickName": "",
    "farmingTime": ""
})
const farmopen = () => {
    farminopen.isopens = true
}
const Addfarm = () => {
    httpaxios({
        url: 'http://localhost:5002/api/Farming/AddFarming',
        method: 'post',
        data: formfarm
    })
        .then(res => {
            if (res.data.code == 200) {
                ElMessage.success(res.data.message)
                ShowFarm()
                farminopen.isopens = false
            }
            else {
                ElMessage.error(res.data.message)
            }
        })
}
// ---------------------------显示养殖信息-----------------------------
const DateFarm = reactive({
    "farmingId": null,
    "farmingName": "",
    "farmingFrom": "",
    "farmingDay": null,
    "farmingBrand": "",
    "farmingNickName": "",
    "farmingTime": ""
})
const ShowFarm = () => {
    httpaxios({
        url: 'http://localhost:5002/api/Farming/ShowFarming',
        method: 'get',
    })
        .then(res => {
            DateFarm.farmingName = res.data.data.farmingName
            DateFarm.farmingFrom = res.data.data.farmingFrom
            DateFarm.farmingDay = res.data.data.farmingDay
            DateFarm.farmingBrand = res.data.data.farmingBrand
            DateFarm.farmingNickName = res.data.data.farmingNickName
            DateFarm.farmingTime = res.data.data.farmingTime
        })
}
// ---------------------------添加养殖企业信息-----------------------------
const farmcompaninopen = reactive({
    panopens: false
})
const fpanyfarm = reactive({
    "companyName": "",
    "companyUserName": "",
    "companyCount": null,
})
const farmcompanopen = () => {
    farmcompaninopen.panopens = true
}
const AddCompany = () => {
    httpaxios({
        url: 'http://localhost:5002/api/Farming/AddFarmingCompany',
        method: 'post',
        data: fpanyfarm
    })
        .then(res => {
            if (res.data.code == 200) {
                ElMessage.success(res.data.message)
                ShowFarmCompany()
                farmcompaninopen.panopens = false
            }
            else {
                ElMessage.error(res.data.message)
            }
        })
}
// ---------------------------显示养殖企业信息-----------------------------
const DateFarmCompany = reactive({
    "companyName": "",
    "companyUserName": "",
    "companyCount": null,
})
const ShowFarmCompany = () => {
    httpaxios({
        url: 'http://localhost:5002/api/Farming/ShowFarmingCompany',
        method: 'get',
    })
        .then(res => {
            DateFarmCompany.companyName = res.data.data.companyName
            DateFarmCompany.companyUserName = res.data.data.companyUserName
            DateFarmCompany.companyCount = res.data.data.companyCount
        })
}
// ---------------------------添加屠宰企业信息-----------------------------
const Slaugiopens = reactive({
    slaufsop: false
})
const Slaugdast = reactive({
    "slaughterName": "",
    "provincId": null,
    "cityId": null,
    "countyId": null,
    "slaughterTime": "",
    "slaughterHome": ""
})
const farmslaugda = () => {
    Slaugiopens.slaufsop = true
}
const AddSlaugs = () => {
    httpaxios({
        url: 'http://localhost:5002/api/Slaughter/AddSlaug',
        method: 'post',
        data: Slaugdast
    })
        .then(res => {
            if (res.data.code == 200) {
                ElMessage.success(res.data.message)
                ShowSlaugs()
                Slaugiopens.slaufsop = false
            }
            else {
                ElMessage.error(res.data.message)
            }
        })
}
// 省份
const ProvinceData: any = ref({
    "provincId": '',
    "provincName": ""
})
const GetProvince = () => {
    httpaxios({
        url: 'http://localhost:5002/api/Slaughter/GetProvince',
        method: 'get',
    })
        .then(res => {
            ProvinceData.value = res.data.data
        })
}
// 市
const CityData: any = ref([])
const GetCity = () => {
    httpaxios({
        url: 'http://localhost:5002/api/Slaughter/GetCity',
        method: 'get',
        params: {
            id: Slaugdast.provincId
        }
    })
        .then(res => {
            CityData.value = res.data.data
            Slaugdast.cityId = null
            Slaugdast.countyId = null

        })
}
//县
const ContyData: any = ref([])
const GetCouty = () => {
    httpaxios({
        url: 'http://localhost:5002/api/Slaughter/GetCounty',
        method: 'get',
        params: {
            id: Slaugdast.cityId
        }
    })
        .then(res => {
            ContyData.value = res.data.data
            Slaugdast.countyId = null
        })
}
// ---------------------------显示养殖企业信息-----------------------------
const DateSlaugs = reactive({
    "slaughterName": "辉哥养猪",
    "provincName": "山西省",
    "cityName": "晋中市",
    "countyName": "寿阳县",
    "slaughterTime": "2025-10-13T16:00:00",
    "slaughterHome": "这是一个辉哥公司"
})
const ShowSlaugs = () => {
    httpaxios({
        url: 'http://localhost:5002/api/Slaughter/ShowSlaug',
        method: 'get',
    })
        .then(res => {
            DateSlaugs.slaughterName = res.data.data.slaughterName
            DateSlaugs.provincName = res.data.data.provincName
            DateSlaugs.cityName = res.data.data.cityName
            DateSlaugs.countyName = res.data.data.countyName
            DateSlaugs.slaughterTime = res.data.data.slaughterTime
            DateSlaugs.slaughterHome = res.data.data.slaughterHome
        })
}
// ---------------------------添加深加工信息-----------------------------
const Deeodialog = reactive({
    deepisop: false
})
const deepdat = reactive({
    "deepName": "",
    "deepUserName": ""
})
const farmdeep = () => {
    Deeodialog.deepisop = true
}
const Adddeep = () => {
    httpaxios({
        url: 'http://localhost:5002/api/Deep/AddDeeps',
        method: 'post',
        data: deepdat
    })
        .then(res => {
            if (res.data.code == 200) {
                ElMessage.success(res.data.message)
                Showdeep()
                Deeodialog.deepisop = false
            }
            else {
                ElMessage.error(res.data.message)
            }
        })
}
// ---------------------------显示信息-----------------------------
const Datedeep = reactive({
    "deepName": "",
    "deepUserName": ""
})
const Showdeep = () => {
    httpaxios({
        url: 'http://localhost:5002/api/Deep/ShowSlaughter',
        method: 'get',
    })
        .then(res => {
            Datedeep.deepName = res.data.data.deepName
            Datedeep.deepUserName = res.data.data.deepUserName
        })
}
// ---------------------------图片-----------------------------
import type { UploadProps, UploadUserFile } from 'element-plus'
const fileList = ref<UploadUserFile[]>([])
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
    console.log(uploadFile, uploadFiles)
}
const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
    dialogImageUrl.value = uploadFile.url!
    dialogVisible.value = true
}
const imgsdata = reactive({
    "uid": "",
    "name": "",
    "url": "",
    "imgsType": 1
})
const addimgs = () => {

    imgsdata.uid = fileList.value.map(x => x.uid).toString()
    imgsdata.name = fileList.value.map(x => x.name).toString()
    imgsdata.url = fileList.value.map(x => x.url).toString()
    httpaxios({
        url: 'http://localhost:5002/api/Imgs/AddImgs',
        method: 'post',
        data: imgsdata
    })
        .then(res => {
            if (res.data.code == 200) {
                ElMessage.success(res.data.message)
            }
            else {
                ElMessage.error(res.data.message)
            }
        })
}
const dataimgs = reactive({
    "imgsId": 3,
    "imgsName": "",
    "imgsType": 1
})
const con = ref([])
const getimgs = () => {
    httpaxios({
        url: 'http://localhost:5002/api/Imgs/GetImgs',
        method: 'get',
        params: {
            id: dataimgs.imgsId
        }
    })
        .then(res => {
            con.value = res.data.data
        })
}
// --------------------显示保健信息------------------------------------
const conse = ref([])
const showhealth = () => {
    httpaxios({
        url: 'http://localhost:5002/api/Farming/ShowHealth',
        method: 'get',
    })
        .then(res => {
            conse.value = res.data.data
        })
}
// --------------------新增一行保健信息------------------------------------

const addrowhealth = () => {
    conse.value.push({ "healthId": null, "healthDay": null, "healthTypeName": "", "healthName": "" })
}
const delrowhealth = (index: any) => {
    conse.value.splice(index, 1)
}
// --------------------删除保健信息------------------------------------
const deletehealth = (id: any) => {
    ElMessageBox.confirm(
        '确认删除吗?',
        'Warning',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            httpaxios({
                url: 'http://localhost:5002/api/Farming/Delhealth',
                method: 'delete',
                params: {
                    id: id
                }
            })
                .then(res => {
                    if (res.data.code == 200) {
                        ElMessage.success(res.data.message)
                        showhealth()
                    }
                    else {
                        ElMessage.error(res.data.message)
                    }
                })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })
}
// --------------------添加保健信息------------------------------------
const healthda = reactive({
    "healthId": 0,
    "healthDay": null,
    "healthTypeName": "",
    "healthName": ""
})
const savehealth = () => {
    httpaxios({
        url: 'http://localhost:5002/api/Farming/AddHealth',
        method: 'post',
        data: healthda
    })
        .then(res => {
            if (res.data.code == 200) {
                ElMessage.success(res.data.message)
                showhealth()
            }
            else {
                ElMessage.error(res.data.message)
            }
        })
}
// --------------------修改保健信息------------------------------------
const updahealthda = reactive({
    "healthId": null,
    "healthDay": null,
    "healthTypeName": "",
    "healthName": ""
})
const updatehealth = (row: any) => {
    httpaxios({
        url: 'http://localhost:5002/api/Farming/UpdateSource',
        method: 'post',
        data: updahealthda
    })
        .then(res => {
            if (res.data.code == 200) {
                ElMessage.success(res.data.message)
                showhealth()
            }
            else {
                ElMessage.error(res.data.message)
            }
        })
}
</script>

<style scoped>
.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}

.el-upload--picture-card {
    width: 100px;
    /* 自定义宽度 */
    height: 100px;
    /* 自定义高度 */
}

/* 调整卡片内图标的大小（若需要） */
.el-upload--picture-card .el-icon-plus {
    font-size: 24px;
    /* 图标字号 */
}
</style>